const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = (env) => {
  if (!env) {
    env = {};
  }
  let plugins = [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({ template: "./app/views/index.html" }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ];
  if (env.production) {
    plugins.push(
      new webpack.DefinePlugin({
        "process.env": {
          NODE_ENV: '"production"',
        },
      }),
      new ExtractTextPlugin("style.css", { ignoreOrder: true })
    );
  }
  return {
    entry: ["./app/js/viewport.js", "./app/js/main.js"],
    devServer: {
      contentBase: "./dist",
      hot: true,
      compress: true,
      port: 9000,
      clientLogLevel: "none",
      quiet: true,
    },
    module: {
      loaders: [
        {
          test: /\.html$/,
          loader: "html-loader",
        },
        {
          test: /\.vue$/,
          loader: "vue-loader",
          options: {
            cssModules: {
              localIdentName: "[path][name]---[local]---[hash:base64:5]",
              camelCase: true,
            },
            extractCSS: true,
            loaders: env.production
              ? {
                  css: ExtractTextPlugin.extract({
                    use: "css-loader!px2rem-loader?remUnit=40&remPrecision=8",
                    fallback: "vue-style-loader",
                  }),
                  scss: ExtractTextPlugin.extract({
                    use:
                      "css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader",
                    fallback: "vue-style-loader",
                  }),
                }
              : {
                  css:
                    "vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8",
                  scss:
                    "vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader",
                },
          },
        },
        {
          test: /\.scss$/,
          loader: "style-loader!css-loader!sass-loader",
        },
      ],
    },
    resolve: {
      extensions: [".js", ".vue", ".json"],
      alias: {
        vue$: "vue/dist/vue.esm.js",
      },
    },
    plugins,
    output: {
      filename: "[name].min.js",
      path: path.resolve(__dirname, "dist"),
    },
  };
};
